<script setup>
import { reactive, markRaw } from 'vue';
import { Plus,Minus,CirclePlus,Search,Female,Male,Aim,House } from '@element-plus/icons-vue';

// 使用markRaw将组件标记为非响应式 
const plusmarkraw = markRaw(Plus)
const Minusmarkraw = markRaw(Minus)
const CirclePlusmarkraw = markRaw(CirclePlus)
const Searchmarkraw = markRaw(Search)
const Femalemarkraw = markRaw(Female)
const Malemarkraw = markRaw(Male)
const Aimmarkraw = markRaw(Aim)
const Housemarkraw = markRaw(House)

const ConsoleNavData = reactive({
  'aa':[
    {
      tit:'用户',
      name: plusmarkraw
    },
    {
      tit:'商品',
      name: Minusmarkraw
    },
    {
      tit:'订单',
      name: CirclePlusmarkraw
    },
    {
      tit:'评价',
      name: Searchmarkraw
    },
    {
      tit:'图库',
      name: Femalemarkraw
    },
    {
      tit:'公告',
      name: Malemarkraw
    },
    {
      tit:'配置',
      name: Aimmarkraw
    },
    {
      tit:'优惠',
      name: Housemarkraw
    }
  ]
})
</script>

<template>
  <div class="ConsoleNav">
    <nav v-for="ItemNav in ConsoleNavData.aa">
      
      <el-icon>  
        <component :is="ItemNav.name" />  
      </el-icon>  

      {{ ItemNav.tit }}
    </nav>
  </div>
</template>

<style lang="scss" scoped>
.ConsoleNav{
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  nav{
    width: 135px;
    height: 70px;
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

}
</style>